<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">校园二手市场</h1>
		</header>

		<div id="pullrefresh" class="mui-scroll-wrapper">
			<div class="mui-scroll">

				<div class="mui-content" style="margin-top: 45px;margin-bottom: 50px;">
					<div id="slider" class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="images/banner3.jpg">
								</a>
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/banner1.jpg">
								</a>
							</div>
							<!-- 第二张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/banner2.jpg">
								</a>
							</div>
							<!-- 第三张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/banner3.jpg">
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="images/banner1.jpg">
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>

					<!--校区分类-->
					<div class="group">
						<div class="campus" onclick="openCampusList('成都校区')">
							<img src="images/icon-chengdu.jpg">
							<p>成都校区</p>
						</div>
						<div class="campus" onclick="openCampusList('雅安校区')">
							<img src="images/icon-yaan.jpg">
							<p>雅安校区</p>
						</div>
						<div class="campus" onclick="openCampusList('都江堰校区')">
							<img src="images/icon-dujiangyan.jpg">
							<p>都江堰校区</p>
						</div>
					</div>

					<!--最新数据 -->
					<div class="latest_list" id="goods_list" v-cloak>
						<p style="margin-left: 10px;">最新发布</p>
						<div class="info" v-for="goods in list" @click="open_detail(goods.id)">
							<hr />
							<div class="top">
								<img :src="userFacePath+goods.userface">
								<div class="uinfo">
									<span>{{goods.nick_name}}</span>
									<p>{{goods.createTimeText}}</p>
								</div>
								<div class="price">
									<span>{{goods.price}}</span>元
								</div>

							</div>
							<div class="one_middle" v-if="goods.pictureArray.length==1">
								<img :src="goodsImgPath+goods.pictureArray[0]" />

							</div>
							<div class="more_middle" style="clear: both;" v-if="goods.pictureArray.length>1">
								<img :src="goodsImgPath+goods.pictureArray[0]" />
								<img :src="goodsImgPath+goods.pictureArray[1]" />

							</div>
							<div class="bottom">

								{{goods.des}}

							</div>
						</div>
					</div>

				</div>

			</div>
		</div>

		<script src="js/util.js"></script>
		<script type="text/javascript" src="js/const.js"></script>
		<script src="js/request.js"></script>
		<script type="text/javascript" src="js/goods_service.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript">
			var goods_list = new Vue({
				el: '#goods_list',
				data: {
					list: [],
					goodsImgPath: GOODS_IMG_PATH + '/',
					userFacePath: USER_FACE_PATH + '/'
				},
				methods: {
					//打开详情页面
					open_detail: function(id) {
						//触发详情页面的自定义事件
						mui.fire(detailPage, 'goodsId', {
							id: id
						});
						detailPage.show('slide-in-right');
					}
				}
			});
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var res = goodsService.all_goods_list();
					if(res.resultCode == REQUEST_SUCCESS_CDOE) {
						goods_list.list = res.data;
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
						mui.toast('下拉刷新成功');
					}

				}, 1000);
			}
			/**
			 * 上拉加载具体业务实现
			 */
			var count = 0;

			function pullupRefresh() {

				mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));
				setTimeout(function() {

				}, 1000);
			}
			(function($, doc) {

				mui('.mui-slider').slider({
					interval: 3000 //自动轮播周期 默认0，这里3s
				});

				mui.plusReady(function() {
					painting_add_button(); //绘制红色添加按钮

					//给detailPage赋值,根据ID获取详情页面
					detailPage = plus.webview.getWebviewById('goods-detail');
					if(!detailPage) {
						detailPage = mui.preload({
							id: 'goods-detail',
							url: 'html/goods_detail.html'
						});
					}

					//获取校园列表页
					campusListPage = plus.webview.getWebviewById('goods-campus');
					if(!campusListPage) {
						campusListPage = mui.preload({
							id: 'goods-campus',
							url: 'html/goods_campus.html'
						});
					}
				});

				var res = goodsService.all_goods_list();
				goods_list.list = res.data; //进入页面时加载数据
			})();

			function openCampusList(campus) {
				mui.fire(campusListPage, 'campusList', {
					campus: campus
				});
				campusListPage.show('slide-in-right');
			}
		</script>
	</body>

</html>